<template>
  <div class="animated-logo-container">
    <svg viewBox="0 0 400 120" class="login-svg">
      <defs>
        <!-- 渐变定义 -->
        <linearGradient id="strokeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
          <stop offset="50%" style="stop-color:#e3f2fd;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" />
        </linearGradient>

        <!-- 发光效果滤镜 -->
        <filter id="glow">
          <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
          <feMerge>
            <feMergeNode in="coloredBlur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      <!-- 背景文字 -->
      <text x="20" y="80"
            font-family="'Arial Black', Arial, sans-serif"
            font-size="50"
            font-weight="900"
            fill="rgba(255,255,255,0.1)"
            class="background-text">LOGIN</text>

      <!-- 动画路径组 -->
      <g class="letter-paths">
        <!-- L -->
        <path class="letter-path" data-letter="L"
              d="M 30 20 L 30 85 L 70 85"
              stroke="url(#strokeGradient)"
              stroke-width="6"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="none"
              filter="url(#glow)" />

        <!-- O -->
        <path class="letter-path" data-letter="O"
              d="M 110 20 C 130 20 145 35 145 55 C 145 75 130 90 110 90 C 90 90 75 75 75 55 C 75 35 90 20 110 20 Z"
              stroke="url(#strokeGradient)"
              stroke-width="6"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="none"
              filter="url(#glow)" />

        <!-- G -->
        <path class="letter-path" data-letter="G"
              d="M 215 30 C 210 25 200 20 185 20 C 165 20 150 35 150 55 C 150 75 165 90 185 90 C 200 90 210 85 215 80 L 215 65 L 195 65"
              stroke="url(#strokeGradient)"
              stroke-width="6"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="none"
              filter="url(#glow)" />

        <!-- I -->
        <path class="letter-path" data-letter="I"
              d="M 245 25 L 245 85 M 235 25 L 255 25 M 235 85 L 255 85"
              stroke="url(#strokeGradient)"
              stroke-width="6"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="none"
              filter="url(#glow)" />

        <!-- N -->
        <path class="letter-path" data-letter="N"
              d="M 280 25 L 280 85 M 280 25 L 320 85 M 320 25 L 320 85"
              stroke="url(#strokeGradient)"
              stroke-width="6"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="none"
              filter="url(#glow)" />
      </g>

      <!-- 前景填充文字 -->
      <text x="20" y="80"
            font-family="'Arial Black', Arial, sans-serif"
            font-size="50"
            font-weight="900"
            fill="white"
            class="foreground-text"
            style="opacity: 0;">LOGIN</text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { gsap } from 'gsap'

let timeline: gsap.core.Timeline | null = null

onMounted(() => {
  // 获取所有路径元素
  const letterPaths = document.querySelectorAll('.letter-path')
  const foregroundText = document.querySelector('.foreground-text')

  // 初始化所有路径的strokeDasharray和strokeDashoffset
  letterPaths.forEach((path) => {
    const pathElement = path as SVGPathElement
    const length = pathElement.getTotalLength()

    // 设置初始状态
    gsap.set(pathElement, {
      strokeDasharray: length,
      strokeDashoffset: length,
      opacity: 0
    })
  })

  // 设置前景文字初始状态
  gsap.set(foregroundText, { opacity: 0 })

  // 创建主时间轴
  const createAnimation = () => {
    timeline = gsap.timeline({ repeat: -1, repeatDelay: 2 })

    // 第一阶段：路径逐个绘制动画
    letterPaths.forEach((path, index) => {
      if (timeline) {
        timeline
          .to(path, {
            opacity: 1,
            duration: 0.1,
            ease: "power2.out"
          }, index * 0.2)
          .to(path, {
            strokeDashoffset: 0,
            duration: 1,
            ease: "power2.out"
          }, index * 0.2 + 0.1)
      }
    })

    // 第二阶段：显示完整文字并隐藏路径
    if (timeline) {
      timeline
        .to(foregroundText, {
          opacity: 1,
          duration: 0.5,
          ease: "power2.inOut"
        }, "+=0.5")
        .to(letterPaths, {
          opacity: 0,
          duration: 0.3,
          ease: "power2.inOut"
        }, "-=0.2")

      // 第三阶段：文字闪烁效果
      timeline
        .to(foregroundText, {
          opacity: 0.7,
          duration: 0.2,
          yoyo: true,
          repeat: 3,
          ease: "power2.inOut"
        }, "+=0.5")

      // 第四阶段：所有元素消失，准备下一轮
      timeline
        .to(foregroundText, {
          opacity: 0,
          duration: 0.5,
          ease: "power2.inOut"
        }, "+=0.5")
        .call(() => {
          // 重置路径状态
          letterPaths.forEach((path) => {
            const pathElement = path as SVGPathElement
            const length = pathElement.getTotalLength()
            gsap.set(pathElement, {
              strokeDashoffset: length,
              opacity: 0
            })
          })
        })
    }

    return timeline
  }

  // 启动动画
  setTimeout(() => {
    createAnimation()
  }, 500)
})

onUnmounted(() => {
  // 清理动画
  if (timeline) {
    timeline.kill()
    timeline = null
  }
})
</script>

<style scoped lang="scss">
.animated-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.login-svg {
  width: 400px;
  height: 120px;
  overflow: visible;
}

.background-text {
  user-select: none;
  pointer-events: none;
}

.foreground-text {
  user-select: none;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.letter-path {
  // 路径样式将由GSAP动态控制
}

// 响应式设计
@media (max-width: 768px) {
  .login-svg {
    width: 300px;
    height: 90px;
  }
}

@media (max-width: 480px) {
  .login-svg {
    width: 250px;
    height: 75px;
  }
}
</style>
